import React, { Component } from 'react'
import styles from './Home.module.scss'
import SearchInput from '../SearchInput/SearchInput'
import {  getNavImgs, getHomeFloorData } from '../../data/api'
import axios from '../../myaxios/myaxios'
import { withRouter } from 'react-router-dom'
//b1. 引入连接器
import {connect} from 'react-redux'
// 走马灯组件
import { Carousel } from 'antd-mobile';
//c.1引入仓库
import store from '../../store'
// c.2
import {getSwiperListAction,getSwiperNavAction} from '../../store/action/homeAction'
class Home extends Component {
  //点击首页图片
  handleImgClick = (params) => {
    this.props.history.push("goodDetail?goods_id=" + params.goods_id)
    console.log(this.props);
    console.log(params.goods_id);
  }
  handleNavClick = (params) => {
    console.log(params);
    this.props.history.push("category");
  }
  //点击图层,产品列表页面
  handleFloorItemClick = (params) => {
    console.log(params);
    this.props.history.push("productList?query=服装")
  }

  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
    // swiper_list: [],
    // navs: [],
    floorData: []//图片列表数据
  }
  //2.发请求
  async componentDidMount() {
    // getSwiperData().then((res) => {
    //   this.setState({
    //     swiper_list: res.data.message
    //   })
    // })
    /* c.3手动派发Action */
    store.dispatch(getSwiperListAction())
    store.dispatch(getSwiperNavAction())
    // let res = await getNavImgs();
    let floorData = await getHomeFloorData();
    // console.log(res);
    this.setState({
      // navs: res.data.message,
      floorData: floorData.message
    })
    console.log(this.state.floorData);
  }
  render() {
    return (
      <div className={styles.zffHome}>
        {/* 首页标题 */}
        <div className={styles.zffHomeHeader}>
          <div className={styles.homeHeaderTitle}>{this.props.title}</div>
        </div>
        {/* 首页结束 */}
        <SearchInput></SearchInput>
        {/* 搜索结束 */}
        {/* 轮播图 */}
        <div className={styles.zffHomeSwiper}>
          <Carousel
            autoplay
            dots
            infinite>
            {this.props.swiper_list.map((val, index) => (
              <div
                onClick={this.handleImgClick.bind(this, val)}
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 轮播图结束 */}
        {/* 首页导航开始 */}
        <div className={styles.zffHomeNavs}>
          {
            this.props.navs.map((v) => {
              return (
                <div onClick={this.handleNavClick} className={styles.homeNavsItem} key={v.image_src}>
                  <img src={v.image_src} alt="" />
                </div>
              )
            })

          }
        </div>
        {/* 首页导航结束 */}
        {/* 首页楼层数据开始 */}
        <div className={styles.zffHomeFloorData}>
          {
            this.state.floorData.map(v => {
              return <div className={styles.floorDataItem} key={v.floor_title.name}>
                {/* title开始 */}
                <div className={styles.dataItemImg}>
                  <img src={v.floor_title.image_src} alt={v.floor_title.name} />
                </div>
                {/* title结束 */}
                {/* 图片列表Start */}
                <div className={styles.productList}>
                  {
                    v.product_list.map((p) => {
                      return <div className={styles.productListItem} key={p.image_src} onClick={this.handleFloorItemClick.bind(this, p)}>
                        <div className={styles.imageWrapper}>
                          <img src={p.image_src} alt={p.name} />
                        </div>
                      </div>
                    })
                  }
                </div>
                {/* 图片列表end */}
              </div>
            })
          }
        </div>
        {/* 首页楼层数据结束 */}
      </div>
    )
  }
}
// b2.配置注入的属性
const mapStateToProps=(state)=>{
  return {
    title:state.homeReducer.title,
    swiper_list:state.homeReducer.swiperList,
    navs:state.homeReducer.navs
  }
}
// b3.注入属性
export default connect(mapStateToProps,null)(withRouter(Home))
